<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript">

	</script>
	<style type="text/css">
		.div1{
			width: 300px;
			height: 300px;
			background-color: red;
			display:table-cell;
			vertical-align: middle;

		}

	 	 img{
	 		height: 180px;
	 		width: 180px;
			background-color: green;
			display: inline-block;	
			float: left;
		}
		a{
			width: 190px;
			height: 180px;	
			
			background-color: blue;
			display:table-cell;
			vertical-align: middle;


		}




		span{
			width:200px; height:10px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;
		}
		div{
			width: 200px;
			height: 300px;
			display:table-cell;vertical-align: middle;
			border:1px solid red;
			display: block;
		}
	</style>
</head>
<body>
	<div class="div1">
		
			<img src="http://open.file.meizu.com/group1/M00/00/60/Cix_s1fd_gyAFpn2AAscQInnNPY885_180x180.png" alt="">
			<a>魅族 Lifeme BTS30 蓝牙音箱撒打算开绿灯撒赖扩大撒赖扩大势力看看了看看手机打开速度就</a>
		
	</div>
	<span>魅族 Lifeme BTS30 蓝牙音箱撒打算开绿灯撒赖扩大撒赖扩大势力看看了</span>
	<div>魅族 Lifeme BTS30 蓝牙音箱撒打算开绿灯撒赖扩大撒赖扩大势力看看了</div>
</body>
</html>
<!-- {display:table-cell;vertical-align: middle;}样式可以使块内容垂直居中，无论是图片还是文字，
但使用这样式会把块变成行块元素，兄弟块高度都会以高度最高的那个块的高度统一显示并且并列在一起。
把兄弟块转换成display:block块元素才不会并列和高度一致。
*不能把设置了这样式的块浮动，否则垂直居中失效。* -->